

<link rel="stylesheet" href="../../assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../../assets/css/datepicker.css" />
<link rel="stylesheet" href="../../assets/css/ui.jqgrid.css" />
<link rel="stylesheet" href="../../assets/css/jquery.rating.css" />
<script type="text/javascript" src="common.js"></script>
<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		Words
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			My Own Words List From Articles
		</small>
	</h1>
</div><!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">
		<!-- PAGE CONTENT BEGINS -->
		<div class="well well-sm" style="display: none;">
			<button type="button" class="close line-height-0" data-dismiss="alert">
				<i class="ace-icon fa fa-times smaller-75"></i>
			</button>

			Here are all the words from your article, some of them are really helpful. 
		</div>

		<table id="grid-table"></table>

		<div id="grid-pager"></div>

		<script type="text/javascript">
			var $path_base = "../..";//in Ace demo this will be used for editurl parameter
		</script>

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null,"../../assets/js/date-time/bootstrap-datepicker.min.js","../../assets/js/jqGrid/jquery.jqGrid.min.js","../../assets/js/jqGrid/i18n/grid.locale-en.js","../../assets/js/jquery.rating.pack.js", null]
	ace.load_ajax_scripts(scripts, function() {
	  //inline scripts related to this page
		 


	
	jQuery(function($) {
		var grid_selector = "#grid-table";
		var pager_selector = "#grid-pager";
		
		//resize to fit page size
		$(window).on('resize.jqGrid', function () {
			$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
	    })
		//resize on sidebar collapse/expand
		var parent_column = $(grid_selector).closest('[class*="col-"]');
		$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
			if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
				//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
				setTimeout(function() {
					$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
				}, 0);
			}
	    })
	
	
		jQuery(grid_selector).jqGrid({
			//direction: "rtl",
	
			//subgrid options
			subGrid : true,
			//subGridModel: [{ name : ['No','Item Name','Qty'], width : [55,200,80] }],
			//datatype: "xml",
			subGridOptions : {
				plusicon : "ace-icon fa fa-plus center bigger-110 blue",
				minusicon  : "ace-icon fa fa-minus center bigger-110 blue",
				openicon : "ace-icon fa fa-chevron-right center orange"
			},
			//for this example we are using local data
			subGridRowExpanded: function (subgridDivId, rowId) {
				var pattern = /(id=\".+_content\")/ig;
				var rowData = jQuery(grid_selector)
						.getRowData(rowId);
				var rowDataId = rowData.id;
				
				var subgridTableId = subgridDivId + "_t";
				$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
				$("#" + subgridTableId).jqGrid({
					datatype: 'json',
					//data: subgrid_data,
					url : "../../getSenListForSubGrid?wordId=" + rowDataId,
					colNames: ['ID','Content','Useful', 'Action'],
					colModel: [
						{ name: 'id', width: 50 },
						{ name: 'content', width: 600 },
						{ name: 'tempFlag', width: 50 },
						{ name: 'action', width: 50 }
					],
					
					gridComplete : function() {
						//alert("subgridTableId:" + subgridTableId);
						var ids = jQuery("#" + subgridTableId)
								.jqGrid('getDataIDs');
						// alert("ids:" + ids);
						for (var i = 0; i < ids.length; i++) {
							var cl = ids[i];
							//similarBtn = "<input style='height:22px;width:50px;' type='button' value='Similar' onclick=\"getSimilarWords('"
							//	+ cl + "');\" />";
							toggleMarkBtn = "<input style='height:30px;width:120px;' type='button' value='ToggleMark' onclick=\"toggleSenMark('"
								+ cl +"', '" + subgridTableId + "');\" />";
							jQuery("#" + subgridTableId).jqGrid(
									'setRowData',
									ids[i],
									{
										action :   toggleMarkBtn
									});
						}
					},
				});
			},
			
	
	
			//data: grid_data,
			//datatype: "local",
			datatype : "json",
			url : "../../getWordList",
			height: 'auto',
			colNames:[' ', 'ID','Content','Pron', 'Hit', 'Rank', 'Explain'],
			colModel:[
				{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
					formatter:'actions', 
					formatoptions:{ 
						keys:true,
						//delbutton: false,//disable delete button
						
						delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
						//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
					}
				},
				{name:'id',index:'id', width:60, sorttype:"int", editable: false, sortable:true},
				{name:'value',index:'value', width:60,editable: true, sortable:true} ,
				{name:'pron',index:'pron', width:70, sortable: true, editable: false},
				{name:'tempHit',index:'hit', width:70, sortable: true, editable: false},
				{name:'tempRank',index:'rank', width:70, sortable: true},
				/*
				{
					name : 'act',
					index : 'act',
					width : 100,
					sortable : false
				},
				*/
				{name:'explain2',index:'explain2', width:70, sortable: true, editable: false}
			], 
	
			viewrecords : true,
			rowNum:30,
			rowList:[10,20,30,50],
			pager : pager_selector,
			altRows: true,
			//toppager: true,
			
			multiselect: true,
			//multikey: "ctrlKey",
	        multiboxonly: true,
	        
			loadComplete : function() {
				var table = this;
				setTimeout(function(){
					styleCheckbox(table);
					
					updateActionIcons(table);
					updatePagerIcons(table);
					enableTooltips(table);
				}, 0);
			},
			
			gridComplete : function() {
				var ids = jQuery(grid_selector)
						.jqGrid('getDataIDs');
				
				// alert("ids:" + ids);
				for (var i = 0; i < ids.length; i++) {
					var cl = ids[i];
					//similarBtn = "<input style='height:22px;width:50px;' type='button' value='Similar' onclick=\"getSimilarWords('"
					//	+ cl + "');\" />";
					/*
					easyBtn = "<input style='height:30px;width:30px;' type='button' value='E' onclick=\"updateRank('"
						+ cl + "', 1);\" />";
					mediumBtn = "<input style='height:30px;width:30px;' type='button' value='M' onclick=\"updateRank('"
						+ cl + "', 3);\" />";
					hardBtn = "<input style='height:30px;width:30px;' type='button' value='H' onclick=\"updateRank('"
						+ cl + "', 5);\" />";
					ignoreBtn = "<input style='height:30px;width:30px;' type='button' value='I' onclick=\"updateRank('"
						+ cl + "', -2);\" />";
					*/
						
					var rowData = jQuery("#grid-table").getRowData(cl);
					var actionHtml = "<div>"; 
					actionHtml += '<input name="star' + ids[i] + '" type="radio" class="star" value=1 />';
					actionHtml += '<input name="star' + ids[i] + '" type="radio" class="star" value=2 />';
					actionHtml += '<input name="star' + ids[i] + '" type="radio" class="star" value=3 />';
					actionHtml += '<input name="star' + ids[i] + '" type="radio" class="star" value=4 />';
					actionHtml += '<input name="star' + ids[i] + '" type="radio" class="star" value=5 />';
					actionHtml += '</div>';
					var levelStar = "";
					//console.log("rowData.level:" + rowData.level);
					for(var j = 0; j < parseInt(rowData.level); j++) {
						levelStar += "<img width='15px' height='15px' src='../../assets/images/star_full.png' />";
					}
					
					
					jQuery("#grid-table").jqGrid(
							'setRowData',
							ids[i],
							{
								/*
								act :   easyBtn
										+ "&nbsp;"
										+ mediumBtn
										+ "&nbsp;"
										+ hardBtn
										+ "&nbsp;"
										+ ignoreBtn,
								*/
								tempRank : actionHtml,
								level : levelStar  
							});
					
					 var inputStr= "input[name='star" + ids[i] + "']"; 
					 //console.log("inputStr:" + inputStr);
					 //console.log("rowData.tempRank:" + rowData.tempRank);
					 $(inputStr).rating({
					  callback: function(value, link){
						  var inputName = $(this).attr("name");
						  var wordId = inputName.replace("star", "");
						  //console.log("value:" + value + " link:" + link + " this:" + this + " inputName:" + inputName + " wordId:" + wordId);
						  if(typeof(value) == "undefined") {
							  value = -1;
							  return;
						  }
						  updateRank(wordId, value);
					  }
					});
					 $(inputStr).rating(); 
					 $(inputStr).rating('select', parseInt(rowData.tempRank) - 1) ;
	
					 
					 
					 jQuery(".rating-cancel").click(function() {
						 	//console.log("cancel ...")
					        var name = jQuery(this).parent().next().attr('name');
						 	//console.log("name:" + name);
						 	var wordId = name.replace("star", "");
						 	var value = -1;
						 	updateRank(wordId, value);
					  });

				}
			},
	
			editurl: "/addOrUpdateSen",//nothing is saved
			caption: "Word List"
	
			//,autowidth: true,
	
	
			/**
			,
			grouping:true, 
			groupingView : { 
				 groupField : ['name'],
				 groupDataSorted : true,
				 plusicon : 'fa fa-chevron-down bigger-110',
				 minusicon : 'fa fa-chevron-up bigger-110'
			},
			caption: "Grouping"
			*/
	
		});
		$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
		
		
	
		//enable search/filter toolbar
		//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
		//jQuery(grid_selector).filterToolbar({});
	
		function UploadImage(response, postdata) {
			alert("UploadImage");
			var data = $.parseJSON(response.responseText);

		    if (data.success == true) {
		        if ($("#fileToUpload").val() != "") {
		            ajaxFileUpload(data.id);
		        }
		    }  

		    return [data.success, data.message, data.id];
		}
		
		

		function ajaxFileUpload(id) 
		{
		    $("#loading")
		    .ajaxStart(function () {
		        $(this).show();
		    })
		    .ajaxComplete(function () {
		        $(this).hide();
		    });

		    $.ajaxFileUpload
		    (
		        {
		            url: '@Url.Action("UploadImage")',
		            secureuri: false,
		            fileElementId: 'fileToUpload',
		            dataType: 'json',
		            data: { id: id },
		            success: function (data, status) {

		                if (typeof (data.success) != 'undefined') {
		                    if (data.success == true) {
		                        return;
		                    } else {
		                        alert(data.message);
		                    }
		                }
		                else {
		                    return alert('Failed to upload logo!');
		                }
		            },
		            error: function (data, status, e) {
		                return alert('Failed to upload logo!');
		            }
		        }
		    )          
		}  
		
		
	
		//switch element when editing inline
		function aceSwitch( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=checkbox]')
					.addClass('ace ace-switch ace-switch-5')
					.after('<span class="lbl"></span>');
			}, 0);
		}
		//enable datepicker
		function pickDate( cellvalue, options, cell ) {
			setTimeout(function(){
				$(cell) .find('input[type=text]')
						.datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
			}, 0);
		}
	
	
		//navButtons
		jQuery(grid_selector).jqGrid('navGrid',pager_selector,
			{ 	//navbar options
				edit: true,
				editicon : 'ace-icon fa fa-pencil blue',
				add: true,
				addicon : 'ace-icon fa fa-plus-circle purple',
				del: true,
				delicon : 'ace-icon fa fa-trash-o red',
				search: true,
				searchicon : 'ace-icon fa fa-search orange',
				refresh: true,
				refreshicon : 'ace-icon fa fa-refresh green',
				view: true,
				viewicon : 'ace-icon fa fa-search-plus grey',
			},
			{
				//edit record form
				//closeAfterEdit: true,
				//width: 700,
				recreateForm: true,
				beforeShowForm : function(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			},
			{
				//new record form
				//width: 700,
				closeAfterAdd: true,
				recreateForm: true,
				viewPagerButtons: false,
				beforeShowForm : function(e) {
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
					.wrapInner('<div class="widget-header" />')
					style_edit_form(form);
				}
			},
			{
				//delete record form
				recreateForm: true,
				beforeShowForm : function(e) {
					var form = $(e[0]);
					if(form.data('styled')) return false;
					
					form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
					style_delete_form(form);
					
					form.data('styled', true);
				},
				onClick : function(e) {
					alert(1);
				}
			},
			{
				//search form
				recreateForm: true,
				afterShowSearch: function(e){
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
					style_search_form(form);
				},
				afterRedraw: function(){
					style_search_filters($(this));
				}
				,
				multipleSearch: true,
				/**
				multipleGroup:true,
				showQuery: true
				*/
			},
			{
				//view record form
				recreateForm: true,
				beforeShowForm: function(e){
					var form = $(e[0]);
					form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
				}
			},
			{
				afterSubmit :  function(response, postdata) {
		        	alert("here");
		            return [false, response.responseText, ""];
		    	} 
			}
		)
	
		function style_edit_form(form) {
			//enable datepicker on "sdate" field and switches for "stock" field
			form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
				.end().find('input[name=stock]')
					.addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
					   //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
					  //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
	
			//update buttons classes
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
			buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
			
			buttons = form.next().find('.navButton a');
			buttons.find('.ui-icon').hide();
			buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
			buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');		
		}
	
		function style_delete_form(form) {
			var buttons = form.next().find('.EditButton .fm-button');
			buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
			buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
			buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
		}
		
		function style_search_filters(form) {
			form.find('.delete-rule').val('X');
			form.find('.add-rule').addClass('btn btn-xs btn-primary');
			form.find('.add-group').addClass('btn btn-xs btn-success');
			form.find('.delete-group').addClass('btn btn-xs btn-danger');
		}
		function style_search_form(form) {
			var dialog = form.closest('.ui-jqdialog');
			var buttons = dialog.find('.EditTable')
			buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
			buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
			buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
		}
		
		function beforeDeleteCallback(e) {
			var form = $(e[0]);
			if(form.data('styled')) return false;
			
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_delete_form(form);
			
			form.data('styled', true);
		}
		
		function beforeEditCallback(e) {
			var form = $(e[0]);
			form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
			style_edit_form(form);
		}
	
	
	
		//it causes some flicker when reloading or navigating grid
		//it may be possible to have some custom formatter to do this as the grid is being created to prevent this
		//or go back to default browser checkbox styles for the grid
		function styleCheckbox(table) {
		/**
			$(table).find('input:checkbox').addClass('ace')
			.wrap('<label />')
			.after('<span class="lbl align-top" />')
	
	
			$('.ui-jqgrid-labels th[id*="_cb"]:first-child')
			.find('input.cbox[type=checkbox]').addClass('ace')
			.wrap('<label />').after('<span class="lbl align-top" />');
		*/
		}
		
	
		//unlike navButtons icons, action icons in rows seem to be hard-coded
		//you can change them like this in here if you want
		function updateActionIcons(table) {
			/**
			var replacement = 
			{
				'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
				'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
				'ui-icon-disk' : 'ace-icon fa fa-check green',
				'ui-icon-cancel' : 'ace-icon fa fa-times red'
			};
			$(table).find('.ui-pg-div span.ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
			*/
		}
		
		//replace icons with FontAwesome icons like above
		function updatePagerIcons(table) {
			var replacement = 
			{
				'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
				'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
				'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
				'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
			};
			$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
				var icon = $(this);
				var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
				
				if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
			})
		}
	
		function enableTooltips(table) {
			$('.navtable .ui-pg-button').tooltip({container:'body'});
			$(table).find('.ui-pg-div').tooltip({container:'body'});
		}
	
		//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
	
		$(document).on('ajaxloadstart', function(e) {
			$(grid_selector).jqGrid('GridUnload');
			$('.ui-jqdialog').remove();
		});
	});
	});
</script>
